<template>
  <div >
    <div>
      <FormPanel
        ref="formPanel"
        :list="formList"
        :cols="2"
        :formType="type"
        labelWidth="100"
        :isSubmitBtn="false"
        @formChange="formChangeHandle"
      />
      <div style="display:flex">
        <div style="text-align:right;width:100px">
          <div>订单车型</div>
        </div>
        <div style="width:100%">
          <FilterTable
            ref="table"
            height="auto"
            maxHeight="500"
            :columns="columns"
            :dataSource="seriesList"
            :isPagination='false'
            :isToperInfo='false'
            :isColumnFilter='false'
            :isSelectColumn='false'
            :onColumnsChange="columns => this.columns = columns"
          ></FilterTable>
        </div>
      </div>
      <!-- <div>
        <el-form ref="form" label-width="100px">
          <el-form-item label="订单车型">
            <FilterTable
              ref="table"
              height="auto"
              :columns="columns"
              :dataSource="seriesList"
              :isPagination='false'
              :isToperInfo='false'
              :isColumnFilter='false'
              :isSelectColumn='false'
              :onColumnsChange="columns => this.columns = columns"
            ></FilterTable>
          </el-form-item>
        </el-form>
      </div> -->
      <FormPanel
        ref="formPanel1"
        :list="formList1"
        :cols="2"
        :formType="type"
        labelWidth="100"
        :isSubmitBtn="false"
        @formChange="formChangeHandle1"
      />
    </div>

    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
      <template v-if="this.type ==='edit'? true: false">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button @click="saveDialog" type="primary">保 存</el-button>
      </template>
    </div>
  </div>
</template>

<script>
import { updateReturnSalesInfo,getReturnActionDetailId } from '@/api/potenCus/customer/returnSales';
import { queryFollowWays } from '@/api/potenCus/basedata/followWays';
import { dictionary } from '@/utils/dictMixin';

export default {
  name: 'salesModel',
  mixins: [dictionary],
  props: {
    type: {
      type: String,
      default: 'edit'
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    this.saveData = null;
    return {
      formList: this.createFormList(),
      formList1:this.createFormList1(),
      page: {
        pageNum: 1,
        currentPage: 1,
        pageSize: 20,
        limit: 20,
        isValid:10041001
      },
      columns:this.creatTableCoumns(),
      seriesList:[]
    };
  },
  created() {
    this.init();
    this.getFollowList()
  },
  methods: {
    init() {
      if (this.type === 'edit' || this.type === 'show') {
        // 更新接口需要的记录 ID
        this.recordId = this.rowData.actionId;
        this.isActioned = 2;
        this.getSalesInfo()
      }
    },
    selectChangeHandle(rows) {
      if (!rows.length) return;
      this.selectedRow = rows[0];
    },
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '计划跟进时间',
          fieldName: 'planActionDate',
          disabled: true,
          selfCols: 2,
          placeholder: '计划跟进时间',
        },
        {
          type: 'TEXT_AREA',
          label: '跟进备注',
          fieldName: 'taskNameScene',
          selfCols: 2,
          disabled: true,
          placeholder: '跟进备注',
        }
      ];
    },
    createFormList1(){
      return[
        {
          type: 'MULTIPLE_CHECKBOX',
          label: '跟进目的',
          fieldName: 'purposeReturn',
          placeholder: '请选择',
          selfCols: 2,
          initialValue: '',
          itemList: this.createDictList('7046'),
          rules: [{ required: true, message: '请选择跟进目的', trigger: 'change' }],
        },
        {
          type: 'SELECT',
          label: '跟进方式',
          fieldName: 'actionedWay',
          placeholder: '请选择',
          selfCols: 2,
          itemList: [],
          rules: [{ required: true, message: '请选择跟进方式', trigger: 'change' }],
          // request: {
          //   fetchApi: queryFollowWays,
          //   params: this.page,
          //   datakey:'records' ,
          //   valueKey: 'basedataId',
          //   textKey: 'basedataName',
          // }
        },
        {
          type: 'TEXT_AREA',
          label: '本次跟进情形',
          selfCols: 2,
          fieldName: 'actionedScene',
          placeholder: '请输入'
        }
      ]
    },
    creatTableCoumns(){
      return [
        {
          title: '车辆状态',
          dataIndex: 'auditResult',
          align: 'center',
          filterType: 'input',
          filterItems: this.createDictList('7051'),
          render: props => {
            return <span>{this.createDictText(props.row.auditResult, '7051')}</span>;
          }
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '车辆信息',
          dataIndex: 'inteCarName',
          align: 'center',
          filterType: 'input'
        }
      ]
    },
    formChangeHandle(val) {
      // console.log('val',val)
      this.saveData = {...this.saveData,val};
    },
    formChangeHandle1(){
      this.saveData = {...this.saveData,val};
    },
    async getFollowList() {
      const res = await queryFollowWays(this.page);
      // console.log('跟进方式',res)
      if (res.resultCode === 200) {
        this.formList1.find(item =>item.fieldName==='actionedWay').itemList = res.data.records.map(x => ({ value: x.basedataId, text: x.basedataName }));
      }
    },
    // 获取回访明细
    async getSalesInfo() {
      const res = await getReturnActionDetailId(this.recordId);
      console.log('回访明细', res);
      if (res.resultCode === 200) {
        this.seriesList = res.data.carPlateDTOS
        this.formList.forEach(x => {
          x.initialValue = res.data[x.fieldName];
        });
        this.formList1.forEach(x => {
          if (x.fieldName === 'purposeReturn') {
            x.initialValue = res.data[x.fieldName] ? res.data[x.fieldName].split(',').map(x => parseInt(x)) : [];
          }
          else {
            x.initialValue = res.data[x.fieldName];
          }
        });
      }
    },
    async saveDialog() {
      this.$refs.formPanel.SUBMIT_FORM();
      let backData =  this.$refs.formPanel1.SUBMIT_FORM();
      if (this.saveData !== null && backData) {
        console.log('this.saveData',this.saveData)
        let saveObj = {...this.saveData}
        saveObj['planActionDate'] = new Date(this.formList[0].initialValue).getTime();
        saveObj['actionedWay'] = this.formList1.find(item => item.fieldName ==='actionedWay').initialValue
        saveObj['actionId'] = this.rowData.actionId;
        let temp = this.formList1.find(item => item.fieldName === 'purposeReturn').initialValue;
        saveObj['purposeReturn'] = temp ? temp.toString() : '';
        console.log('this.saveObj', saveObj)
        let res = {};
        if (this.type === 'edit') {
          res = await updateReturnSalesInfo( saveObj );
        }
        if (res.resultCode === 200) {
          this.closeDialog('refresh');
        }
      }
    },
    closeDialog(param) {
      this.$emit('close', false, param);
    },
  }
};
</script>

<style lang="less" scoped>
.table-wrapper{
  padding-top:0px;
  padding-right:0px;
}
.information{
  position: relative;
  .info{
    position: absolute;
    top: -10px;
    left: 13px;
  }
  .line{
    width: 6px;
    height: 20px;
    background: #1890FF;
    position: absolute;
    top: -10px;
    left: 0;
  }
  .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 90.5%;
    margin: 20px 0 12px 92px;
}
}
</style>

